<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/common/common/common.js"></script>
  <style type="text/css">
   
   /*设置取消li、a标签默认样式*/
   *{
    margin:0;
    padding:0;
   }
   li{
    list-style: none;
   }
   a{
     text-decoration: none;
   }
    /*修改标题栏颜色*/
    .bar.bar-nav {
      background-color: #fff;
      border-bottom: 1px solid #ededee;
      width: 100%;
      height: 2.2rem;
    }
    .bar.bar-nav a{
      display: inline-block;
      width: 32%;
      height: 2.2rem;
      line-height: 2.2rem;
      font-size: 14px;
      color: black;
      text-align: center;
    }

    /*修改标题栏字体颜色*/
    .bar.bar-nav .title {
      color: #fff;
    }
    
    /*修改工具栏背景颜色*/
    .bar.bar-tab {
      background-color: #FEEA4D;
    }
    /*修改内容区背景色*/
    
    
    /*去掉列表框的线*/
    .list-block ul:before, .list-block ul:after {
      /*background-color: #fff;*/
      display: none;
    }
    
    /*设置列表中li的样式*/
    .list-block .item-content {
/*      padding-right: 0.75rem;
      padding: 0;
      margin: 0 1.5rem;
      border-bottom: 1px dashed #89DAF5;
      z-index: 100;*/
    }

    /*设置列表框中横线*/
    .list-block .item-inner{
      /*border-bottom: 1px dashed #89DAF5;
      z-index: 100;*/
    }

    /*设置列表中显示文字的内边距*/
    .list-block .item-media+.item-inner {
      /*margin: 0 0.75rem;*/
      /*padding-left: 0.75rem;*/
    }

  /*定义.page的样式*/
  .page{
    background:#fff;
  }
  
   /*定义#li_block的样式*/
   #li_block{
    width:100%;
    height:100%;
   }

  /*列表中ul,li的样式定义*/
  #li_block>ul{
    width:100%;
    height:100%;
    float:left;
  }

 #li_block>ul li{
   width:30%;
   height:40%;
   float: left;
   margin-left:2.6%;
   padding-bottom: 0.2rem;
  }
  #it_iner {
    width: 100%;
    height:100%;
    overflow: hidden;
    /*padding:0;*/
  }
  #it_iner .item-title{
    width:100%;
    height:100%;
    text-align: center;
  }
  #it_iner  img{
   display:block;
   width:100%;
  }
   #videologo{
     display:block;
     width: 0.8rem;
     height: 0.8rem;
     margin: 1% 0;
   }
  #videologo img{
    display: block;
    width: 100%;
  }
  /*设置字体大小*/
   #wenz{
    display: inline-block;
    text-align:justify;
    white-space:normal;
    font-size:0.6rem;
    color:black;
  }
  /*设置第一个导航部分按钮显示的页面样式*/
  #nianji{
    width:100%;
    height:auto;
    background:#fff;
    position:absolute;
    top:2.2rem;
    z-index:100;
    display: none;
  }
  #nianji>ul{
    width: 84%;
    height:100%;
    margin: 0 auto;
    padding-bottom:0.4rem;
  }
  #nianji>ul li{
    width:100%;
   /* border-bottom:0.05rem solid #A4A4A4;*/
    height:2.0rem;
    line-height:2.0rem;
    text-align: center;
    border-bottom: solid 1px gainsboro;
  }
  #nianji ul li a{
    color:#2E2E2E;
    font-size: 14px;
  }
/*设置第二个导航部分按钮显示的页面样式*/
  #pro{
    width:100%;
    height:auto;
    background:#fff;
    position:absolute;
    top:2.2rem;
    z-index:100;
    display: none;
  }
  #pro>ul{
    width: 84%;
    height:100%;
    margin: 0 auto;
    padding-bottom:0.4rem;
  }
  #pro>ul li{
    width:100%;
   /* border-bottom:0.05rem solid #A4A4A4;*/
    height:2.0rem;
    line-height:2.0rem;
    text-align: center;
    border-bottom: solid 1px gainsboro;
  }
  #pro ul li a{
    color:#2E2E2E;
    font-size: 14px;
  }
/*设置第三个导航部分按钮显示的页面样式*/
 #textbook{
    width:100%;
    height:auto;
    background:#fff;
    position:absolute;
    top:2.2rem;
    z-index:100;
    display: none;
    padding-bottom:0.4rem;
 }
 #textbook p{
    width:82%;
    /*border-bottom:0.05rem solid #A4A4A4;*/
    height:2.0rem;
    line-height:2.0rem;
    color:#2E2E2E;
    font-size: 14px;
    margin: 0 auto;
    text-align: center;
    border-bottom: solid 1px gainsboro;
 }

  /*遮罩层效果*/
  #shade{
  width:100%;
  background:rgba(0,0,0,0.3);
  z-index: 100;
  position: absolute;
  bottom: 0;
  z-index:10;
  display: none;
}

  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
      <!-- 标题栏 -->
      <!-- <header class="bar bar-nav" >
          <button class="button pull-right" onclick="search()">
               <span>搜索</span>
          </button>
          <div class="buttons-row" >
              <a href="" class="tab-link active button" id="tab1">年级全部</a>
              <a href="" class="tab-link button" id="tab2" >全部学科</a>
          </div>                                
      </header> -->
      <header class="bar bar-nav">
          <a href="#" id="tab1">
            <span>全部年级</span>
            <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png">
          </a>
          <a href="#" id="tab2">
            <span>全部学科</span>
            <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png">
          </a>
          <a href="#" id="tab3">
            <span>教材分类</span>
            <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png">
          </a>
      </header>
      <!-- 主题内容部分 -->
      <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" onclick="bodyclick()">
          <div class="list-block" id="li_block">
              <ul class="list-container" >
              </ul>
          </div>
          <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader">
              <div class="preloader"></div>
          </div>
      </div>

      <!-- 点击导航第一个按钮显示出的页面 -->
      <div id="nianji">
         <ul>
            <!-- <li><a href="">全部年级</a></li>
            <li><a href="">一年级</a></li>
            <li><a href="">二年级</a></li>
            <li><a href="">三年级</a></li>
            <li><a href="">四年级</a></li>
            <li><a href="">五年级</a></li>
            <li><a href="">六年级</a></li>
            <li><a href="">七年级</a></li>
            <li><a href="">八年级</a></li> -->
         </ul>
      </div>

      <!-- 点击导航第二个按钮显示出的页面 -->
      <div id="pro">
          <ul>
         <!--  <li><a class="pro_a" href="">全部学科</a><a class="pro_b" href="#">道德与法治</a></li>
            <li><a class="pro_a" href="">语文</a><a class="pro_b" href="">数学</a></li>
            <li><a class="pro_a" href="">语文</a><a class="pro_b" href="">数学</a></li>
            <li><a class="pro_a" href="">语文</a><a class="pro_b" href="">数学</a></li>
            <li><a class="pro_a" href="">语文</a><a class="pro_b" href="">数学</a></li>
            <li><a class="pro_a" href="">语文</a><a class="pro_b" href="">数学</a></li>
            <li><a class="pro_a" href="">语文</a><a class="pro_b" href="">数学</a></li>    -->
          </ul>         
      </div>
      <!-- 点击导航第三个按钮 -->
      <div id="textbook">
         <p onclick="clkbook()">图书</p>
         <p onclick="clkvideo()">视频</p>
      </div>
       <!--遮罩效果 -->
       <div id="shade" onclick="bodyclick()">
        
       </div>
               
    </div>
  </div>

  <!-- ! 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/swiper/swiper.min.js"></script>
<script type="text/javascript">


// 加载flag
      var loading = false;
      // 最多可加载的条目
      var maxItems = 100;
      var offset = 0
      var limit = 12
      var lastlength = 12;
      var datalist = new Array();
      var selectgradeid = -1;
      var selectprojectid = -1;
      // 设置教材分类默认索引值
      var  classify = 0;

      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {

          // 如果正在加载，则退出
          if (loading) return;

          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          setTimeout(function() {
              // 重置加载flag
              loading = false;
              console.log('================'+lastlength + '====' + limit);


              if (lastlength < limit) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
                  return;
              }
               offset = datalist.length;
               getData();
               getVideo();
              // 添加新条目
              // addItems(itemsPerLoad, lastIndex);
              // 更新最后加载的序号
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
          }, 1000);
      });

  // 点击图书筛选图书界面
  function clkbook(){
     offset = 0;
     getData();
  }

  // 点击视频筛选视频界面
  function clkvideo(){
    offset = 0;
    getVideo();
  }
    

// 点击按钮显示页面的函数
 function danji(){
    if(isIOSApply == '1' && isIOS()){
      $$("#tab3").hide();
    }

     // 点击第一个导航tab1按钮显示页面
    $$('#tab1').click(function(){
       $$('#pro').hide();
       $$('#textbook').hide();

      // 点击出现遮罩效果
       var docheight = $$('.infinite-scroll-bottom').height(); 
       $$('#shade').show();
       $$("#shade").css({ "height": docheight });


        if($$('#nianji').is(':hidden')){//如果当前隐藏
           $$('#nianji').show();
           $$('#tab1').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');

        }else{
          $$('#nianji').hide();
          $$('#shade').hide();
          $$('#tab1').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
        }
    
    });
    
    //点击第二个导航tab2按钮显示页面
    $$('#tab2').click(function(){
       $$('#nianji').hide();
       $$('#textbook').hide();

       // 点击出现遮罩效果
       var docheight = $$('.infinite-scroll-bottom').height(); 
       $$('#shade').show();
       $$("#shade").css({ "height": docheight });

       if($$('#pro').is(':hidden')){//如果当前隐藏
           $$('#pro').show();
           $$('#tab2').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
       }else{
           $$('#pro').hide();
           $$('#shade').hide();
           $$('#tab2').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
       }
       
    }); 
    //点击第三个导航tab3按钮显示页面
    $$('#tab3').click(function(){
        $$('#nianji').hide();
        $$('#pro').hide();

       // 点击出现遮罩效果
       var docheight = $$('.infinite-scroll-bottom').height(); 
       $$('#shade').show();
       $$("#shade").css({ "height": docheight });

       if($$('#textbook').is(':hidden')){//如果当前隐藏
           $$('#textbook').show();
           $$('#tab3').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
       }else{
           $$('#textbook').hide();
           $$('#shade').hide();
           $$('#tab3').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
       }
       
    }); 
    // 点击textbook下面的p标签隐藏下拉框
    $$('#textbook p').click(function(){
        $$('#textbook').hide();
        $$('#shade').hide();
        // 获取当前值赋值
        var text = $$(this).text();
        $$('#tab3 span').text(text);

        // 获取当前索引值
        classify = $$(this).index();

        // 上下图标的指向相应更改
        if ($$('#textbook').is(':hidden')) {
            $$('#tab3').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
        }else{
            $$('#tab3').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
        }
    })
 
}


function bodyclick(){
        // 点击隐藏div
        $$('#nianji').hide();
        $$('#pro').hide();
        $$('#textbook').hide();
        $$('#shade').hide(); 
}


  // 遍历数据 页面内容    
  function getData(){
    var param = {}

    var url = 'apis/books?offset='+offset+'&limit='+limit;
    if (selectgradeid != -1) {
      url += '&grade_id='+ selectgradeid;
    }
    if (selectprojectid != -1) {
      url += '&category_id='+ selectprojectid;
    }

    // // var url = 'apis/books';
    // param.offset = offset;
    // param.limit = limit;
    // if(selectgradeid != -1){
    //   param.grade_id = selectgradeid;  
    // }
    
    // if(selectprojectid != -1){
    //   param.category_id = selectprojectid;  
    // }



    net_request('get',url,param,successCallBack,errorCallBack);
  }

  // 遍历数据 视频
   function getVideo(){
      var param = {}

    var url = 'api/v1/videos?';
    var paramsnum  = 0;

    if (selectgradeid != -1) {
      paramsnum = paramsnum + 1;
    }
    if (selectprojectid != -1) {
      paramsnum = paramsnum + 1;
    }

    if(paramsnum>0){
      url += 'search=';
    }


    if (selectgradeid != -1) {
      url += 'grade_id:'+selectgradeid+';';
    }
    if (selectprojectid != -1) {
      url += 'category_id:'+selectprojectid+';';
    }

    if(paramsnum > 0){
      url = url.substring(0,url.length-1);
    }
    if(paramsnum > 1){
      url += '&searchJoin=and';
    }
  
    if(paramsnum > 0){
      url += '&offset='+offset+'&limit='+limit+'&orderBy=updated_at&sortedBy=desc';
    }else{
      url += 'offset='+offset+'&limit='+limit+'&orderBy=updated_at&sortedBy=desc';
    }
    




      // var url = 'api/v1/videos?offset='+offset+'&limit='+limit;
    
      // param.offset = offset;
      // param.limit = limit;
      // if(selectgradeid != -1){
      //   param.grade_id = selectgradeid;  
      // }
      
      // if(selectprojectid != -1){
      //   param.category_id = selectprojectid;  
      // }
      
      net_request('get',url,param,getVideoSuccessCallBack,errorCallBack);
   }

  // 遍历数据 年级
  function getGreet(){
    var param = {}
    var url = 'apis/grade';
    net_request('get',url,param,greetSuccessCallBack,errorCallBack);
  }

  // 遍历数据 学科
  function getSubject(){
    var param = {}
    var url = 'apis/category';
    net_request('get',url,param,SubjectSuccessCallBack,errorCallBack);
  }


//成功函数回调 页面
function successCallBack(data){

  // <li class="item-content" id="imli"><div class="item-inner" id="it_iner"><div class="item-title"><img  src="' + item.img + '"><span>' + item.name + '</span></div></div></li>
  if (isNotNull(data)) {
    var databody = data.data;
    if (offset == 0) {
      datalist = new Array();
    }
    if (isNotNull(databody)) {
        
       var html = '';
       lastlength = databody.length;
       for (var i = 0; i < databody.length; i++) {
          var item = databody[i];
          datalist.push(item);
      }

      for (var i = 0; i < datalist.length; i++) {
            var item = datalist[i];

            if (isNotNull(item)) {
              html += '<li class="item-content" index = "'+i+'" onclick="bookclick(this)" id="imli"><div class="item-inner" id="it_iner"><div class="item-title"><img  src="' + item.img + '"><span id="wenz">' + item.name + '</span></div></div></li>';
            }           
      }
    }
             $('.infinite-scroll-bottom .list-container').html(html);
  }
}

// 成功函数回调 视频页
function getVideoSuccessCallBack(data){

  if (isNotNull(data)) {
    var databody = data.data;
    if (offset == 0) {
      datalist = new Array();
    }
    if (isNotNull(databody)) {
        
       var html = '';
       lastlength = databody.length;
       for (var i = 0; i < databody.length; i++) {
          var item = databody[i];
          datalist.push(item);
      }

      for (var i = 0; i < datalist.length; i++) {
            var item = datalist[i];
          
            if (isNotNull(item)) {
              html += '<li class="item-content" index = "'+i+'" onclick="videoclick(this)" id="imli"><div class="item-inner" id="it_iner"><div class="item-title"><img  src="' + item.img + '"><a href="#" id="videologo"><img  src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/video.png"></a><span id="wenz">' + item.name + '</span></div></div></li>';
            }           
      }
    }
             $('.infinite-scroll-bottom .list-container').html(html);
  }
}

//点击图书
function bookclick(cthis){
  var cindex = Number($$(cthis).attr("index"));
  var cid = datalist[cindex].id;
  native_goto("local/bookstore_details?cid="+cid+"&type=0");
}

// 点击视频
function videoclick(cthis){
  var cindex = Number($$(cthis).attr("index"));
  var cid = datalist[cindex].id;
  native_goto("local/bookstore_details?cid="+cid+"&type=1");
}

//成功函数回调 年级
function greetSuccessCallBack(data){


  //调用课本类型
  getSubject();


 // console.log(JSON.stringify(data));
 if (isNotNull(data)) {
     var databody = data.data;

     if (isNotNull(databody)) {
        var html = '<li class="greet" cid = "-1" ><a href = "">全部年级</a></li>';

        for (var i = 0; i < databody.length; i++) {
            var item = databody[i];
            if (isNotNull(item)) {
               html += '<li class="greet" cid = "'+i+'"><a href = "">'+item.name+'</a></li>'
            }
        }
     }
       $$('#nianji ul').append(html);
  }
      // 点击greet事件
     $$('.greet').click(function(){
        // 隐藏 学科div、遮罩效果
        $$('#nianji').hide();
        $$('#shade').hide();
        // 上下图标的指向相应更改
        if ($$('#nianji').is(':hidden')) {
            $$('#tab1').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
        }else{
            $$('#tab1').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
        }

        // 获取当前值
        var text = $$(this).text();
        // 当前值赋值给tab2按钮
        $$('#tab1 span').html(text);
        
        
        
        var cid = Number($$(this).attr("cid"));
        if (cid == -1) {
          selectgradeid = cid;
        }else{
          selectgradeid = databody[cid].id;
        }


        // 重新筛选数据
        if (classify == 1) { //视频
            offset = 0;
            getVideo();
        }else{ //图书
            offset = 0;
            getData();
        }
     });
     
}

//成功函数回调 学科
function SubjectSuccessCallBack(data){
   // console.log(JSON.stringify(data));

   //调用书籍
   getData();
 
   if (isNotNull(data)) {
     var databody = data.data;

     if (isNotNull(databody)) {
        var html = '<li class="subject" cid = "-1"><a href = "">全部学科</a></li>';

        for (var i = 0; i < databody.length; i++) {
           var item = databody[i];
           if (isNotNull(item)) {
            html += '<li class="subject" cid = "'+i+'"><a href = "">'+item.name+'</a></li>'
           }
        }
     }
      $$('#pro ul').append(html);
    }
   // 点击subject事件
   $$('.subject').click(function(){
      // 隐藏 学科div、遮罩效果
      $$('#pro').hide();
      $$('#shade').hide();
      // 上下图标的指向相应更改
      if ($$('#pro').is(':hidden')) {
          $$('#tab2').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
      }else{
          $$('#tab2').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
      }
      // 获取当前值
      var text = $$(this).text();
      // 当前值赋值给tab2按钮
      $$('#tab2 span').html(text);

      

      var cid = Number($$(this).attr("cid"));
      if (cid == -1) {
        selectprojectid = cid;
      }else{
        selectprojectid = databody[cid].id;
      }


      // 重新筛选数据
      // 重新筛选数据
      if (classify == 1) { //视频
          offset = 0;
          getVideo();
      }else{ //图书
          offset = 0;
          getData();
      }
   });
}



//失败函数回调
function errorCallBack(data){
  console.log(data);
}
 
  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/


  }

    
    // 初始化
    $(function(){
        danji();
        
        getGreet()
        
        $.init();

    });
  </script>
</body>
</html>